ui: Tweak some animations

Changed some linear animations to be quad,
added a scale transition to popovers and notifications.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3830>

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 0bc8f9ad5478846535567890aa352c4cb489121d..6aea0fdf744343b97d77e98f4c4b6cc1af017403 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2700,7 +2700,7 @@ export const AppFolderDialog = GObject.registerClass({
             scale_y: 1,
             opacity: 255,
             duration: FOLDER_DIALOG_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            mode: Clutter.AnimationMode.EASE_OUT_EXPO,
         });
 
         this._needsZoomAndFade = false;
@@ -2731,14 +2731,19 @@ export const AppFolderDialog = GObject.registerClass({
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
 
+        this.child.ease({
+            opacity: 0,
+            duration: FOLDER_DIALOG_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+
         this.child.ease({
             translation_x: sourceX - dialogX,
             translation_y: sourceY - dialogY,
             scale_x: this._source.width / this.child.width,
             scale_y: this._source.height / this.child.height,
-            opacity: 0,
             duration: FOLDER_DIALOG_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            mode: Clutter.AnimationMode.EASE_OUT_EXPO,
             onComplete: () => {
                 this.child.set({
                     translation_x: 0,

diff --git a/js/ui/boxpointer.js b/js/ui/boxpointer.js
index 41b912f68528a3b6e7b504b54643ed6062c8fe07..c758911b48d70d34327aab10d855f2bdd6abca5d 100644 (file)
--- a/js/ui/boxpointer.js
+++ b/js/ui/boxpointer.js
@@ -91,18 +91,25 @@ export const BoxPointer = GObject.registerClass({
         this.show();
 
         if (animate & PopupAnimation.SLIDE) {
+            this.scale_x = 0.96;
+            this.scale_y = 0.96;
+
             switch (this._arrowSide) {
             case St.Side.TOP:
                 this.translation_y = -rise;
+                this.set_pivot_point(0.5, 0);
                 break;
             case St.Side.BOTTOM:
                 this.translation_y = rise;
+                this.set_pivot_point(0.5, 1);
                 break;
             case St.Side.LEFT:
                 this.translation_x = -rise;
+                this.set_pivot_point(0, 0.5);
                 break;
             case St.Side.RIGHT:
                 this.translation_x = rise;
+                this.set_pivot_point(1, 0.5);
                 break;
             }
         }
@@ -111,8 +118,10 @@ export const BoxPointer = GObject.registerClass({
             opacity: 255,
             translation_x: 0,
             translation_y: 0,
+            scale_x: 1,
+            scale_y: 1,
             duration: animationTime,
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => {
                 this._muteInput = false;
                 if (onComplete)
@@ -127,24 +136,33 @@ export const BoxPointer = GObject.registerClass({
 
         let translationX = 0;
         let translationY = 0;
+        let scaleX = 1;
+        let scaleY = 1;
         let themeNode = this.get_theme_node();
         let rise = themeNode.get_length('-arrow-rise');
         let fade = animate & PopupAnimation.FADE;
         let animationTime = animate & PopupAnimation.FULL ? POPUP_ANIMATION_TIME : 0;
 
         if (animate & PopupAnimation.SLIDE) {
+            scaleX = 0.96;
+            scaleY = 0.96;
+
             switch (this._arrowSide) {
             case St.Side.TOP:
-                translationY = rise;
+                translationY = -rise;
+                this.set_pivot_point(0.5, 0);
                 break;
             case St.Side.BOTTOM:
-                translationY = -rise;
+                translationY = rise;
+                this.set_pivot_point(0.5, 1);
                 break;
             case St.Side.LEFT:
-                translationX = rise;
+                translationX = -rise;
+                this.set_pivot_point(0, 0.5);
                 break;
             case St.Side.RIGHT:
-                translationX = -rise;
+                translationX = rise;
+                this.set_pivot_point(1, 0.5);
                 break;
             }
         }
@@ -157,8 +175,10 @@ export const BoxPointer = GObject.registerClass({
             opacity: fade ? 0 : 255,
             translation_x: translationX,
             translation_y: translationY,
+            scale_x: scaleX,
+            scale_y: scaleY,
             duration: animationTime,
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => {
                 this.hide();
                 this.opacity = 0;

diff --git a/js/ui/closeDialog.js b/js/ui/closeDialog.js
index 88cc1c8c5f0f1ce5afe21193df773d7f2a5a5c54..ccd3ffc5e5467a3ba58962aad3c531203dbc9d48 100644 (file)
--- a/js/ui/closeDialog.js
+++ b/js/ui/closeDialog.js
@@ -167,12 +167,14 @@ export const CloseDialog = GObject.registerClass({
         global.connectObject(
             'shutdown', () => this._onWait(), this._dialog);
 
-        this._dialog._dialog.scale_y = 0;
         this._dialog._dialog.set_pivot_point(0.5, 0.5);
+        this._dialog._dialog.scale_x = 0.8;
+        this._dialog._dialog.scale_y = 0.8;
 
         this._dialog._dialog.ease({
+            scale_x: 1,
             scale_y: 1,
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_BACK,
             duration: DIALOG_TRANSITION_TIME,
             onComplete: this._onFocusChanged.bind(this),
         });
@@ -198,8 +200,10 @@ export const CloseDialog = GObject.registerClass({
 
         dialog.makeInactive();
         dialog._dialog.ease({
-            scale_y: 0,
-            mode: Clutter.AnimationMode.LINEAR,
+            opacity: 0,
+            scale_x: 0.8,
+            scale_y: 0.8,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: DIALOG_TRANSITION_TIME,
             onComplete: () => dialog.destroy(),
         });

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 30502bfe10348e2bfb4617d4051c2817b76ead26..cbc006478fae320e3cfb4382a696c669339c4340 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1175,10 +1175,15 @@ export const MessageTray = GObject.registerClass({
         this._bannerBin.ease({
             opacity: 255,
             duration: ANIMATION_TIME,
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
+        this._bannerBin.set_pivot_point(0.5, 0.5);
+        this._bannerBin.scale_x = 0.9;
+        this._bannerBin.scale_y = 0.9;
         this._bannerBin.ease({
             y: 0,
+            scale_x: 1,
+            scale_y: 1,
             duration: ANIMATION_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_BACK,
             onComplete: () => {

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 7bddba5a103f6560b0f7a7b8b05e197a2fd1da3e..e8e90da873548ae49ed1453c281391dc9a1311fe 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -821,7 +821,7 @@ class ControlsManager extends St.Widget {
         this.ease({
             opacity: 255,
             duration: STARTUP_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
 
         // Search bar falls from the ceiling

diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index c69263904125d62e0223ef7a30b13894cb0a48ec..056c6d343b18ed5ddb1c8783f750ed37a8062ebb 100644 (file)
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -835,7 +835,7 @@ export const QuickSettingsMenu = class extends PopupMenu.PopupMenu {
         });
 
         this._boxPointer.ease_property('@effects.dim.brightness', color, {
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: POPUP_ANIMATION_TIME,
             onStopped: () => (this._dimEffect.enabled = dim),
         });

diff --git a/js/ui/ripples.js b/js/ui/ripples.js
index 21f5cea21d56cc0b704e51991e3af8e75aad992a..87e304fb7bde9daddd7625b44be1961b72f9e04e 100644 (file)
--- a/js/ui/ripples.js
+++ b/js/ui/ripples.js
@@ -74,7 +74,7 @@ export class Ripples {
             delay,
             duration,
             animationRequired,
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => (ripple.visible = false),
         });
     }

diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js
index e48e6d3fcfc1fb3868ec8fa53eea56190cd1c3b5..a9936c53011bf2194ef2c7cb156071512593b5bc 100644 (file)
--- a/js/ui/windowManager.js
+++ b/js/ui/windowManager.js
@@ -149,7 +149,7 @@ class WindowDimmer extends Clutter.BrightnessContrastEffect {
         });
 
         this.actor.ease_property(`@effects.${this.name}.brightness`, color, {
-            mode: Clutter.AnimationMode.LINEAR,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: (dimmed ? DIM_TIME : UNDIM_TIME) * (animate ? 1 : 0),
             onStopped: () => this._syncEnabled(dimmed),
         });

diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index d029563a7d449c66655b203f10ebdb70ba46515f..a34ebd44fb4fceba42363e7919ca0d13f0844138 100644 (file)
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -1102,7 +1102,7 @@ export const ThumbnailsBox = GObject.registerClass({
 
             thumbnail.ease_property('slide-position', 1, {
                 duration: SLIDE_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.LINEAR,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
                 onComplete: () => {
                     this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT);
                     this._queueUpdateStates();